<template>
  <view class="container">
    <view class="news-detail">
      <view class="news-header">
        <view class="news-title">{{ newsInfo.title }}</view>
        <view class="news-meta">
          <text class="meta-item">{{ newsInfo.date }}</text>
          <text class="meta-item">阅读 {{ newsInfo.views }}</text>
        </view>
      </view>

      <view class="news-content">
        <up-parse :content="newsInfo.content" :tagStyle="tagStyle"></up-parse>
      </view>

      <!-- 评论区域 -->
      <view class="comment-section">
        <view class="comment-header">
          <text class="comment-title">评论</text>
          <text class="comment-count">({{ commentList.length }})</text>
        </view>

        <view class="comment-list">
          <view
            class="comment-item"
            v-for="(item, index) in commentList"
            :key="index"
          >
            <image
              class="avatar"
              :src="item.avatar || '/static/images/default-avatar.png'"
            ></image>
            <view class="comment-content">
              <view class="user-name">{{ item.userName }}</view>
              <view class="comment-text">{{ item.content }}</view>
              <view class="comment-time">{{ item.time }}</view>
            </view>
          </view>
        </view>

        <view class="comment-input-box">
          <up-input
            v-model="commentText"
            placeholder="写下你的评论..."
            border="none"
            clearable
          >
            <template #suffix>
              <up-button
                type="primary"
                size="small"
                shape="circle"
                @click="submitComment"
                :disabled="!commentText"
                >发布</up-button
              >
            </template>
          </up-input>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";
// import { getNewsDetail } from "@/api/news";

interface NewsDetail {
  id: number;
  title: string;
  content: string;
  date: string;
  views: number;
}

const newsInfo = ref<NewsDetail>({
  id: 0,
  title: "",
  content: "",
  date: "",
  views: 0,
});

const tagStyle = ref({
  // 自定义富文本样式
  img: "max-width:100%;height:auto;",
  p: "font-size:16px;line-height:1.8;margin-bottom:15px;",
  h2: "font-size:20px;font-weight:bold;margin:20px 0 15px 0;",
  h3: "font-size:18px;font-weight:bold;margin:18px 0 13px 0;",
});

interface Comment {
  id: number;
  userName: string;
  avatar?: string;
  content: string;
  time: string;
}

const commentList = ref<Comment[]>([]);
const commentText = ref("");

function loadComments(newsId: number) {
  // 模拟数据，实际项目中替换为API请求
  const mockComments = [
    {
      id: 1,
      userName: "用户1",
      content: "这篇文章很有帮助，谢谢分享！",
      time: "2024-03-16 10:30",
    },
    {
      id: 2,
      userName: "用户2",
      content: "请问资金证明需要公证吗？",
      time: "2024-03-16 14:15",
    },
  ];
  commentList.value = mockComments;
}

function submitComment() {
  if (!commentText.value.trim()) return;

  const newComment = {
    id: Date.now(),
    userName: "当前用户", // 实际项目中替换为真实用户名
    content: commentText.value,
    time: new Date().toLocaleString(),
  };

  commentList.value.unshift(newComment);
  commentText.value = "";
}

onLoad((options) => {
  if (options?.id) {
    const newsId = Number(options.id);
    loadData(newsId);
    loadComments(newsId);
  }
});

function loadData(id: number) {
  // 实际项目中替换为API请求
  const mockData = getMockData(id);
  newsInfo.value = mockData;
}

function getMockData(id: number): NewsDetail {
  // 模拟数据，实际项目中替换为API请求
  const mockContents = [
    {
      id: 1,
      title: "2024年美国留学签证最新政策解读",
      content: `
        <h2>一、政策背景</h2>
        <p>美国国务院近日公布了2024年留学签证的最新政策，主要针对F-1和J-1签证申请人...</p>
        <img src="/static/images/news/usa_detail.jpg" alt="美国签证">
        <h2>二、主要变化</h2>
        <p>1. DS-160表格更新：新增了教育背景和工作经历详细填写要求...</p>
        <p>2. 面试预约流程优化：允许提前6个月预约面签时间...</p>
        <h3>注意事项</h3>
        <p>申请人需特别注意资金证明要求提高，需提供至少12个月的生活费证明...</p>
      `,
      date: "2024-03-15",
      views: 1256,
    },
    // 其他资讯的模拟数据...
  ];

  return mockContents.find((item) => item.id === id) || mockContents[0];
}

function goBack() {
  uni.navigateBack();
}
</script>

<style lang="scss" scoped>
.container {
  padding-bottom: 150rpx; /* 增加底部内边距 */
}

.news-detail {
  padding: 0 30rpx;

  .news-header {
    padding: 30rpx 0;
    border-bottom: 1rpx solid #f5f5f5;

    .news-title {
      font-size: 36rpx;
      font-weight: bold;
      margin-bottom: 20rpx;
      line-height: 1.4;
    }

    .news-meta {
      font-size: 26rpx;
      color: #999;

      .meta-item {
        margin-right: 30rpx;
      }
    }
  }

  .news-content {
    padding: 30rpx 0;
  }
}

.comment-section {
  margin-top: 40rpx;
  padding: 0 30rpx;

  .comment-header {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    display: flex;
    align-items: center;

    .comment-count {
      font-size: 28rpx;
      color: #999;
      margin-left: 10rpx;
    }
  }

  .comment-list {
    .comment-item {
      display: flex;
      padding: 20rpx 0;
      border-bottom: 1rpx solid #f5f5f5;

      .avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        margin-right: 20rpx;
      }

      .comment-content {
        flex: 1;

        .user-name {
          font-size: 28rpx;
          color: #333;
          margin-bottom: 10rpx;
        }

        .comment-text {
          font-size: 30rpx;
          line-height: 1.5;
          margin-bottom: 10rpx;
        }

        .comment-time {
          font-size: 24rpx;
          color: #999;
        }
      }
    }
  }

  .comment-input-box {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20rpx 30rpx;
    background: #fff;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
    z-index: 100;
    display: flex;
    align-items: center;
    border-top: 1rpx solid #f5f5f5;

    .up-input {
      flex: 1;
      margin-right: 20rpx;
      background: #f5f5f5;
      border-radius: 50rpx;
      padding: 0 20rpx;
    }
  }
}
</style>
